<template>
  <div>
    <!-- 计算属性实现 -->
    <h2>显示格式化后的时间{{ time | timefomater }}</h2>
    <!-- method实现 -->
    <h3>现在的事件{{ time }}</h3>
    <!-- 过滤器实现 -->
    <h3>现在时间是{{ time | timefomater }}</h3>
    <!-- time 传给第二个 然后在传给mySlice 一层一层过 -->
    <!-- <h3>现在时间是{{ time | timefomater | mySlice }}</h3> -->
    <h1>{{ person }}</h1>
    <button @click="dianji">按钮</button>
    <ul ref="ulref">
      <li v-for="(value, index) in item" :key="index">
        {{ value }}
      </li>
    </ul>
    <button @click="add">点击添加</button>
    <input type="text" />
    <h6>保留两位小数{{ value | baoliu }}</h6>
    <!-- 
        Vue过滤器
        使用方法引用day.js
        全局函数dayjs(
            中放如需要格式的
            如果传值格式化传入的值
            如果不传值格式化当前时间
        )

        .format 格式化的意思
     -->
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  font-size: 0.16rem;
}
</style>
<script>
/* 
全局过滤器 
定义:对要显示的数据进行特定的格式化后在现实(使用一些简单的逻辑)
语法1.注册过滤器:Vue.filter(name,callback) 或new Vue {filter:{}}
语法2.使用过滤器{{xxx|过滤器名}} 或v-bind属性-"xxx|过滤器名称"
注意:1.过滤器可以使用自带的参数,多个过滤器也可以串联
2.并没有改变原本的数据,产生新的对应的数据
必须在new Vue 之前写好过滤器
*/
// import Vue from 'vue';
// Vue.filter ("mySlice",function(value){
//     return value.slice(0,4)
// })
export default {
  /* 过滤器 */
  /* 局部过滤器 */
  filters: {
    /* 
      默认会掉,value时time
      第二个值为过滤器的传参,可以使用es6语法写默认参数
       */
    timefomater(value) {
      // console.log("@", value);
      return "hello";
    },
    baoliu(value) {
      return value.toFixed(2);
    },
    // mySlice(value){
    //     return value.slice(0,4)
    // }
  },
  data() {
    return {
      person: { name: "小鑫" },
      time: 1630582962937,
      item: ["项目1", "项目2", "项目3"],
      value: 1,
    };
  },
  methods: {
    /* $set */
    dianji() {
      if (!this.person.age) {
        /* 
        第一个参数时我们的对象,第二个是我们要设置的属性名,第三个是属性值
         */
        this.$set(this.person, "age", 88);
      } else {
        this.person.age++;
      }
      /* $delete */
      if (this.person.name) {
        /* 
        第一个是我们的对象,第二个值是我们要实时删除的属性
         */
        this.$delete(this.person, "name");
      }
    },
    add() {
      /* 
      $nextTick
      更新数据之后使用这个方法,来获取更新后的dom
      这个箭头函数会在dom异步渲染完成之后获得个数
      在做异步渲染时会批量渲染,批量效果只有在异步效果才会实现(
      举例子同时添加三个数据但是只会打印一次,打印为最终结果
      )
      vue是一部加载,打印会打印之前的dom元素不会根据最新的代码来查看,
      我们审查元素高度已经发生改变可是打印时结果总是慢了一步
      */

      this.item.push(Math.random());
      this.$nextTick(() => {
        const ulem = this.$refs.ulref;
        const length = ulem.childNodes.length;
        console.log("length", length);
      });
    },
    add1() {},
  },
};
</script>
